<!--
 * @Description:
 * @Author: cgt
 * @Date: 2021-12-23 14:05:56
 * @LastEditors: cgt
 * @LastEditTime: 2021-12-28 20:03:30
-->
<template>
  <div class="voltage-control-container">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkedLayers" @change="handleCheckedLayerChange">
      <el-checkbox v-for="layer in layerOptions" :label="layer.name" :key="layer.name">{{ layer.name }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import mixins from '../mixins';
export default {
  name: 'VoltageControlTool',
  props: {
    getTool: {
      type: Function,
      required: true
    },
    mapLoadSuccess: Boolean
  },
  mixins: [mixins],
  data() {
    return {
      checkAll: true,
      isIndeterminate: true,
      checkedLayers: [],
      layerOptions: [
        { name: '10（20，6）kV', value: '0', filter: ['range', [null, 24]], checked: false },
        { name: '35kV', value: '1', filter: ['enum', [25]], checked: true },
        { name: '110（66）kV', value: '2', filter: ['enum', [30, 31, 32]], checked: true },
        { name: '220kV', value: '3', filter: ['range', [33, 33]], checked: true },
        { name: '500（330）kV', value: '4', filter: ['range', [34, 35]], checked: true },
        { name: '500kV以上', value: '5', filter: ['range', [36, null]], checked: true }
      ]
    };
  },
  watch: {
    mapLoadSuccess(success) {
      if (success) {
        this.getTool('ActualGridTool').setSearchOption(this.option);
        this.getTool('ActualGridTool').show();
        this.init();
      }
    }
  },
  methods: {
    init() {
      let options = {};
      let selected = [];
      this.layerOptions.forEach((item) => {
        options[item.value] = item.filter;
        if (item.checked) {
          selected.push(item.value);
          this.checkedLayers.push(item.name);
        }
      });
      this.getTool('VoltageControlTool').setVoltageOption(options, selected);
    },
    handleCheckAllChange(val) {
      this.checkedLayers = val ? this.layerOptions.map((item) => item.name) : [];
      this.isIndeterminate = false;
      this.getCheckedValues();
    },
    handleCheckedLayerChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.layerOptions.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.layerOptions.length;
      this.getCheckedValues();
    },
    getCheckedValues() {
      let checkedItems = this.layerOptions.filter((item) => {
        return this.checkedLayers.indexOf(item.name) > -1;
      });
      let checkedValues = checkedItems.map((item) => {
        return item.value;
      });
      this.getTool('VoltageControlTool').show(checkedValues);
    }
  }
};
</script>

<style scoped></style>
